<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<style>
			.ul-txet li span:nth-child(1){
				/* margin-right: 100px; */
				font-weight: bold;	
			}
			.ul-txet li{
				
				font-size: 14px;
			}
			.ul-txet li:nth-child(1){
			
				font-size: 14px;
				font-weight: bold;	
			}
			.ul-nav li a{
				/* text-align: center; */
				/* margin: 0px 10px; */
				height: 56px;
				line-height: 40px;
				align-self: baseline;
			}
			.ul-nav li.navActive{
				background-color: #eee;
			}
			.ul-nav li :active {
				/* text-align: center; */
				width: 100%;
				background-color: #eee;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-light bg-light m-0 p-0">
			<div class="container">
				<a class="navbar-brand" href="#">后台管理</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				  <span class="navbar-toggler-icon"></span>
				</button>
						
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
				  <ul class="ul-nav navbar-nav mr-auto">
				    <li class="nav-item">
				      <a class="nav-link" href="./first.html">后台首页</a>
				    </li>
				    <li class="nav-item navActive">
				      <a class="nav-link" href="#">用户管理</a>
				    </li>
				    <li class="nav-item">
				      <a class="nav-link " href="./third.html">内容管理</a>
				    </li>
				    <li class="nav-item">
				      <a class="nav-link"  href="./fourth.html">标签管理</a>
				    </li>
				  </ul>
				  <ul class="navbar-nav ml-auto">
					  <li class="nav-item dropdown ">
					    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
					      admin
					    </a>
					    <div class="dropdown-menu">
					      <a class="dropdown-item" href="#">Action</a>
					      <a class="dropdown-item" href="#">Another action</a>
					      <div class="dropdown-divider"></div>
					      <a class="dropdown-item" href="#">Something else here</a>
					    </div>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link " href="">退出</a>
					  </li>
				  </ul>
				  <!-- <form class="form-inline my-2 my-lg-0">
				    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
				    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
				  </form> -->
				</div>
			</div>
		</nav>
		<div class="container mt-3">
			<div class="row">
			  <div class="col-md-2 col-lg-2 col-sm-2">
			    <div class="list-group w-100" id="list-tab" role="tablist">
			      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">用户管理</a>
			      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">用户搜索</a>
			      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">添加用户</a>
			    </div>
			  </div>
			  <div class="col-md-10 col-lg-10 col-sm-10">
			    <div class="tab-content" id="nav-tabContent">
			      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
					  <p class="border-bottom pb-3">用户管理</p>
					  <ul class="nav nav-tabs" id="myTab" role="tablist">
					    <li class="nav-item" role="presentation">
					      <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">用户列表</button>
					    </li>
					    <li class="nav-item" role="presentation">
					      <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">用户搜索</button>
					    </li>
					    <li class="nav-item" role="presentation">
					      <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">添加用户</button>
					    </li>
					  </ul>
					  <div class="tab-content" id="myTabContent">
					    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
							<table class="table">
							    <thead>
							      <tr>
							        <th>Firstname</th>
							        <th>Lastname</th>
							        <th>Email</th>
							      </tr>
							    </thead>
							    <tbody>
							      <tr>
							        <td>John</td>
							        <td>Doe</td>
							        <td>john@example.com</td>
							      </tr>
							      <tr>
							        <td>Mary</td>
							        <td>Moe</td>
							        <td>mary@example.com</td>
							      </tr>
							      <tr>
							        <td>July</td>
							        <td>Dooley</td>
							        <td>july@example.com</td>
							      </tr>
							    </tbody>
							</table>
							
							
								
						</div>
							<div class="row">
								<div class="col-12 d-flex justify-content-center">
									<nav aria-label="Page navigation example">
									  <ul class="pagination">
									    <li class="page-item">
									      <a class="page-link" href="#" aria-label="Previous">
									        <span aria-hidden="true">&laquo;</span>
									      </a>
									    </li>
									    <li class="page-item"><a class="page-link" href="#">1</a></li>
									    <li class="page-item"><a class="page-link" href="#">2</a></li>
									    <li class="page-item"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">4</a></li>
										<li class="page-item"><a class="page-link" href="#">5</a></li>
										<li class="page-item"><a class="page-link" href="#">6</a></li>
									    <li class="page-item">
									      <a class="page-link" href="#" aria-label="Next">
									        <span aria-hidden="true">&raquo;</span>
									      </a>
									    </li>
									  </ul>
									</nav>
								</div>
							</div>
						</div>
					    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
					    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
					  </div>
				  </div>
			      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
					  
				  </div>
			      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
					  
				  </div>
			    </div>
			  </div>
			</div>
		</div>
		
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.bundle.js"></script>
	</body>
</html>